<template>
  <el-scrollbar height="calc(100vh - 70px)">
	<el-drawer v-model="editDrawerVisible" title="执行记录" direction="rtl" :show-close='false' :size="1000">
		<el-timeline v-for="case_log in case_logs">
		    <el-timeline-item center :timestamp="case_log.create_time" placement="top">
				<el-collapse>
		           <el-collapse-item :title="`【用例执行人: ${case_log.create_by_name}】   `">
					   <template #title>
					       <el-text v-if="case_log.result_value === '成功'" type="success">【用例执行人: {{ case_log.create_by_name }}】 【用例花费时间: {{case_log.time.toFixed(2)}}秒】【用例执行结果: {{case_log.result_value}}】</el-text>
					       <el-text v-if="case_log.result_value === '失败'" type="danger">【用例执行人: {{ case_log.create_by_name }}】 【用例花费时间: {{case_log.time.toFixed(2)}}秒】【用例执行结果: {{case_log.result_value}}】</el-text>
					       <el-text v-if="case_log.result_value === '错误'" type="danger">【用例执行人: {{ case_log.create_by_name }}】 【用例花费时间: {{case_log.time.toFixed(2)}}秒】【用例执行结果: {{case_log.result_value}}】</el-text>
					   </template>
					   <template v-for="log_info in case_log.logs">
						   <el-row>
							   <el-text v-if="log_info.includes('【success】')" type="success">{{ log_info }}</el-text>
							   <el-text v-if="log_info.includes('【info】')" type="success">{{ log_info }}</el-text>
							   <el-text v-if="log_info.includes('【warning】')" type="warning">{{ log_info }}</el-text>
							   <el-text v-if="log_info.includes('【error】')" type="danger">{{ log_info }}</el-text>
							   <el-text v-if="log_info.includes('【failed】')" type="danger">{{ log_info }}</el-text>
						   </el-row>
					   </template>
		           </el-collapse-item>
				</el-collapse>
		    </el-timeline-item>
		</el-timeline>
	</el-drawer>
	<div class='create_case'>
		  <el-form :model="caseForm">
			<div class='action'>
				<el-form-item>
				      <el-button type="primary" @click="()=>{this.$router.push({name: 'case'})}">返回</el-button>
					  <el-button v-if="$route.name === 'caseEdit'" type="primary" @click="run">执行</el-button>
					  <el-button v-if="$route.name === 'caseEdit'" type="primary" @click="look_logs">查看</el-button>
				      <el-button type="primary" @click='saveCase'>保存</el-button>
				</el-form-item>
			</div>
			<div class='interface_info'>
				<el-divider content-position="left">用例基本信息</el-divider>
				<el-form :inline="true">
					<el-form-item label="用例名称">
						<el-input v-model="caseForm.name"></el-input>
					</el-form-item>
					<el-form-item label="用例类型">
						<el-select v-model="caseForm.type" placeholder="请选择用例类型" clearable>
							<el-option v-for="case_type in caseType" :label='case_type.label' :value="case_type.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="用例标签">
						<el-select v-model="caseForm.tag" placeholder="请选择用例标签" clearable multiple>
							<el-option v-for="tag in tag_list" :label='tag.name' :value="tag.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="所属模块">
						<el-cascader collapse-tags v-model='caseForm.module' :options="plant_module_list" :props="editProps" clearable  style="width: 100%;"/>
					</el-form-item>
				</el-form>
			</div>
			<el-divider content-position="left">用例详细信息</el-divider>
			<el-tabs>
				<el-tab-pane label="用例全局变量" >
					<KeyTable :keyData='caseForm.params' :readOnly='false'></KeyTable>
				</el-tab-pane>
				<el-tab-pane label="用例前置步骤">
					<ComStep :keyData='caseForm.setup' :actionKeys='actions'></ComStep>
				</el-tab-pane>
				<el-tab-pane label="用例测试步骤">
					<ComStep :keyData='caseForm.steps' :actionKeys='actions'></ComStep>
				</el-tab-pane>
				<el-tab-pane label="用例后置步骤">
					<ComStep :keyData='caseForm.teardown' :actionKeys='actions'></ComStep>
				</el-tab-pane>
			</el-tabs>
		  </el-form>
	</div>
  </el-scrollbar>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen, CopyDocument, Top, Bottom} from '@element-plus/icons-vue'
import BodyEdit from '../../components/BodyEdit.vue'
import KeyTable from '../../components/KeyTable.vue'
import Extract from '../../components/Extract.vue'
import Check from '../../components/Check.vue'
import ComStep from '../../components/ComStep.vue'

export default{
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			EditPen,
			CopyDocument,
			Top,
			Bottom,
		}
	},
	components: {
		BodyEdit,
		KeyTable,
		Extract,
		Check,
		ComStep,
	},
	data() {
		return {
			case_logs: [],
			editDrawerVisible: false,
			caseType:[
				{
					value: 1,
					label: 'API',
				},
				{
					value: 2,
					label: 'UI',
				},
			],
			editProps:{
				emitPath: false,
				value: 'id',
				label: 'name',
			},
			paramsData: [],
			tag_list: [],
			plant_module_list: [],
			data: [],
			json_row_data: {
				key: '',
				// 0 固定值， 1 Faker
				generate: 0,
				type: 'Str',
				value: '',
				
			},
			showEdit: false,
			position: 'top',
			actions: [],
			caseRunForm:{
				env_id: '',
				case_id: '',
			},
			caseForm:{
				project: '',
				id: '',
				module: '',
				name: '',
				type: '',
				tag: '',
				steps: [],
				params: [],
				setup: [],
				teardown: [],
			},
		}
	},
	computed:{
		...mapState(['projectInfo', 'env_id']),
	},
	methods: {
		look_logs(){
			this.editDrawerVisible = true
			this.getCaseLogs()
		},
		run(){
			if(!this.env_id){
				ElMessage({message: '请选择执行环境', type: 'error'})
			}else{
				this.caseRun()
			}
		},
		saveCase(){
			if(this.$route.query.id && this.$route.name === 'caseEdit'){
				this.updateCase()
			}else{
				this.createCase()
			}
		},
		async getPlantModule(){
			const response = await this.$api.getAllPlantModule({project: this.projectInfo.id})
			if (response.status === 200){
				this.plant_module_list = response.data.results
			}
		},
		async createCase(){
			this.caseForm.project = this.projectInfo.id
			const response = await this.$api.createCase(this.caseForm)
			if (response.status === 201){
				ElMessage({message: "保存成功", type: 'success'})
			}
		},
		async caseRun(){
			this.caseRunForm.env_id = this.env_id
			this.caseRunForm.case_id = this.$route.query.id
			const response = await this.$api.caseRun(this.caseRunForm)
			if (response.status === 200){
				ElMessage({message: "【" + this.caseForm.name + '】' + '用例执行中，请等待...', type: 'success'})
			}
		},
		async getCaseLogs(){
			const response = await this.$api.getCaseLogs({case: this.$route.query.id, size: 20})
			if (response.status === 200){
				this.case_logs = response.data.results
			}
		},
		async updateCase(){
			const response = await this.$api.updateCase(this.caseForm.id, this.caseForm)
			if (response.status === 200){
				ElMessage({message: "保存成功", type: 'success'})
			}
		},
		async getCase(id){
			const response = await this.$api.getCase(id)
			if (response.status === 200){
				this.caseForm = response.data.result
			}
		},
		async getActions(){
			const response = await this.$api.getActions({project: this.projectInfo.id, isCase: true})
			if (response.status === 200){
				this.actions = response.data.results
			}
		},
		async getTags(){
			const response = await this.$api.getTags({project: this.projectInfo.id})
			if (response.status === 200){
				this.tag_list = response.data.results
			}
		},
	},
	created() {
		if(this.$route.query.id){
			this.getCase(this.$route.query.id)
		}
		this.getPlantModule()
		this.getActions()
		this.getTags()
	}
}

</script>

<style scoped>
	.action{
		float: right;
	}
	.create_case{
		margin: 20px 20px; 
	}
	.interface_info{
		clear: both;
		/* margin-bottom: 40px; */
	}
	.create_case .el-input-group__append{
		background-color: white;
		box-shadow: none;
		border: none;
		/* padding: 0px; */
	}
	.script{
		text-align: center;
	}
	.script .el-button{
		width: 100px;
	}
	.json{
		overflow-x: hidden;
	}
</style>